<template>
    <div class="sprite-wp">
        <div class="sprite"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const props = defineProps({
    image: {
        type: String,
        default: ''
    }
})
const iwidth = ref()
const iheight = ref()
const imgUrl = ref()
const itemWidth = ref('48px')
const init = () => {
    if (props.image != '') {
        const img = new Image()
        img.src = 'src/assets/sprite/' + props.image + '.png'
        imgUrl.value = img.src
        img.onload = () => {
            iwidth.value = img.width + 'px'
            iheight.value = img.height + 'px'
        }
    }

}
onMounted(() => {
    init()
})
</script >

<style scoped lang="scss">
.sprite-wp {
    width: v-bind(itemWidth);
    height: v-bind(iheight);
    overflow: hidden;
}

.sprite {
    width: v-bind(iwidth);
    height: v-bind(iheight);
    will-change: transform;
    background: url(v-bind(imgUrl)) no-repeat center;
    animation: frame 333ms steps(75) both infinite;
}

@keyframes frame {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-v-bind(iwidth), 0, 0);
    }
}
</style>